<template>
    <div class="img-upload">
        <el-upload 
          :action="upload_file_url"
          :headers="upHeaders" accept="image/*" 
          :limit="1" :on-change="handleLimit"
          :class="{disabled:eqObj.uploadDisabled}"
          list-type="picture-card" 
          :on-success="handleSuccess"  
          :on-remove="handleRemove" 
          :on-preview="handlePictureCardPreview"
          :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">支持jpg/png格式，RGB模式，尺寸：1920x300px，大小不超过20Mb</div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body width="52%">
        <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
    data(){
        return{
            upload_file_url: process.env.VUE_APP_BASE_API + '/api/v1/file/uploadImage?category=banner', // 图片上传地址
            upHeaders:{
            'Authorization':"10cbce37a0a14f9a9d2305baac613b51",
            'Token':'Bearer '+ getToken()
            },
            dialogImageUrl:'',
            disabled: false,
            dialogVisible:false,
            eqObj:{
            uploadDisabled:false,
            },
            imgUrl:'',
            
        }
    },
    methods:{
      handleLimit(file, fileList) {
          console.log(file,'eeeeee');
        if (fileList.length >= 1) {
            this.eqObj.uploadDisabled = true;
            this.$set(this.eqObj, 'uploadDisabled', true);
        } else {
            this.eqObj.uploadDisabled = false;
            this.$set(this.eqObj, 'uploadDisabled', false);
        }
      },
      beforeAvatarUpload(file) {
        let width = 1920;
        let height = 300;
        const isSize = new Promise(function (resolve, reject) {
          let _URL = window.URL || window.webkitURL;
          let img = new Image();
          img.onload = function () {
            let valid = img.width == width && img.height == height;
           valid ? resolve() : reject();
         }
         img.src = _URL.createObjectURL(file);
       }).then(() => {
        return file;
       }, () => {
         this.$message({
           message: `上传图片尺寸只能是${width}*${height}px!请重新选择!`,
           type: 'warning'
         });
         return false;//必须加上return false; 才能阻止
       })
       return isSize;
     },
      handleSuccess(response, file, fileList) {
        console.log(file,'file');
        if (response.code == 200) {
          console.log(response,'22222222');
          this.imgUrl = response.result.absoluteUrl;

          console.log(this.imgUrl,'this.imgUrl');
          this.$emit("getUrl", this.imgUrl);
          // this.contributeForm.cover=response.result.relativeUrl;
          this.$message.success("上传成功");
          // this.$refs.contributeForm.validateField('cover');
        }else{
          this.$message.error('图片上传失败，请重新上传！');
        }
      },
      handlePictureCardPreview(file){
        if(file.response.code == 200){
          this.dialogImageUrl = file.response.result.absoluteUrl;
          this.dialogVisible = true;
        }
      },
      handleRemove(file) {
        if(file.response.code == 200){
          console.log(file.response.result.relativeUrl);
          deleteImgList(file.response.result.relativeUrl).then(res=>{
            console.log(res,'删除图片');
            // this.eqObj.uploadDisabled = false;
          })
        }
        this.eqObj.uploadDisabled = false;
      },
    },
    watch:{
      value:{
        handler(newVal,oldVal){
          console.log(newVal,'22222222');
        },
        deep:true,
      }
    }
}
</script>
<style scoped lang="scss">
@import './../assets/reset.css';
.disabled .el-upload{
    display: none !important;
}
.disabled .el-button--success.is-plain {
    display: none !important;
}
</style>